<template>
  <div class="layout">
    <el-container>
      <el-aside width="200px">
        <el-row>
          <el-col :span="24">
            <h4>小U商城后台</h4>
            <!-- router:el-menu组件的属性!打开路由模式，开启后会跳转到index对应的路径 -->
            <el-menu
              router
              :data="tableData"
              default-active="2"
              :unique-opened="true"
              class="el-menu-vertical-demo"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b"
            >
              <el-menu-item index="/index">
                <i class="el-icon-setting"></i>
                <span slot="title">首页</span>
              </el-menu-item>
              <el-submenu :index="(index+2)+''" v-for="(item,index) in tableData" :key="index">
                <template slot="title">
                  <i :class="item.icon"></i>
                  <span>{{item.title}}</span>
                </template>
                <el-menu-item
                  v-for="(key,inde) in item.children"
                  :key="inde"
                  :index="key.url"
                >{{key.title}}</el-menu-item>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
      <el-container>
        <el-header>
            <v-header></v-header>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import vHeader from './header'
export default {
  data() {
    return {
      tableData: []
    };
  },
  components:{
    vHeader
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.$http.get("menulist?istree=1").then(res => {
        this.tableData = res.data.list;
      });
    },
  }
};
</script>
<style>
* {
  margin: 0;
}
.layout {
  width: 100%;
  height: 100%;
}
.layout .el-container {
  width: 100%;
  height: 100%;
}
.el-aside {
  background: rgb(84, 92, 100);
}
.layout .el-aside h4 {
  font-size: 24px;
  line-height: 60px;
  text-align: center;
  color: #fff;
}
.layout .el-main {
  background: #f6f6f6;
}
.el-submenu,
.el-menu-item {
  width: 200px;
}
</style>